<template>
    <div class="card">
        <div class="card-header" v-if="title">
            {{title}}
        </div>
        <div class="card-body">
            <input type="text" class="form-control d-block name-input" v-model="curValue">
        </div>
        <div class="card-footer">
            <div class="d-flex justify-content-end">
                <button class="btn btn-sm btn-primary m-2" v-if="!error" :disabled="!curValue.length || waiting" @click.prevent="callback(curValue)">确定</button>
                <button class="btn btn-sm btn-danger m-2" v-else :disabled="!curValue.length || waiting" @click.prevent="callback(curValue)">重试</button>
                <button class="btn btn-sm btn-outline-dark m-2" :disabled="waiting" @click.prevent="$emit('close')">取消</button>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
export default {
    props: {
        title: {
            type: String,
            default: "请输入名字"
        },
        value: {
            type: String,
            default: ""
        },
        callback: {
            type: Function,
            required: true
        }
    },
    data() {
        return {
            waiting: false,
            error: false,
            curValue: this.value
        }
    },
    mounted() {
        setTimeout(() => {
            this.$el.querySelector('.name-input').focus();
        })
    }
}
</script>

<style type="text/css" scoped>
.name-input {
    border: none;
    border-bottom: 1px solid #ddd;
    outline: none;
    border-radius: 0;
    box-shadow: none;
}

</style>